<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>待办事项 - 表单绑定</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <link href="./css/style.css" rel="stylesheet" />
  </head>
  <body>
    <div id="app">
      <!-- 应用头部 -->
      <div class="app-header">
        <div class="user-avatar">👤</div>
        <h1>{{title}}</h1>
      </div>

      <!-- 统计信息 -->
      <div class="stats-info">
        <p v-html="statsMessage"></p>
      </div>

      <!-- 任务输入区域 -->
      <div class="input-section">
        <input type="text" class="task-input" v-model="newTask" placeholder="把计划写下来吗?" />
        <button class="add-btn">添加</button>
      </div>

      <!-- 优先级选择 -->
      <div class="priority-section">
        <div class="priority-options">
          <label>
            <input type="radio" value="重要" v-model="priority" />
            重要
          </label>
          <label>
            <input type="radio" value="一般" v-model="priority" />
            一般
          </label>
          <label>
            <input type="radio" value="低" v-model="priority" />
            低
          </label>
        </div>
        <div class="priority-display">任务优先级: {{priority}}</div>
      </div>

      <!-- 实时显示输入内容 -->
      <div>当前输入：{{newTask}}</div>
      <div>选择的优先级：{{priority}}</div>
    </div>

    <script>
      const { createApp, ref } = Vue

      const App = {
        setup() {
          const title = ref('你的待办事项')
          const statsMessage = ref(
            "<span style='color:#ffd700'>报告主人！你还有 <span style='color:#ff6b6b'>1</span> 个待办事项未完成，有 <span style='color:#ff6b6b'>5</span> 个已经过期了，有时间的话，赶紧去做吧。</span>"
          )
          const newTask = ref('')
          const priority = ref('一般')

          return {
            title,
            statsMessage,
            newTask,
            priority
          }
        }
      }

      createApp(App).mount('#app')
    </script>
  </body>
</html>
